<template>
  <div class="main">
    <img src="@/assets/pic/img.jpg" alt="">
    <div v-if="flag" class="mainBox">
      <div class="textbox">
        <p class="title">东噶项目</p>
        <div class="line" />
        <p class="contant">
          文物保护工程是指国家把具有历史价值、文化价值、科学价值的历史遗留物采取的一系列措施防止其受到损害的工程。文物包括文化遗址、古墓葬、古建筑、石窟寺和石刻、近现代重要史迹及代表性建筑、壁画等不可移动文物。中国的不可移动文物大约77万处，其中全国重点文物保护单位有2352处。
          文物保护工程分为：保养维护工程、抢险加固工程、修缮工程、保护性设施建设工程、迁移工程等。
        </p>
      </div>
      <div class="close" @click="flag=false"><img src="@/assets/pic/x.png" alt=""></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true
    }
  }
}
</script>
<style lang="scss" scoped>
$a: 100%;
.main {
  position: absolute;
  height: $a;
  width: $a;
  img {
    width: $a;
    height: $a;
  }
  display: flex;
  justify-content: center;
  align-items: center;
  .mainBox {
    height: 451px;
    width: 1047px;
    position: absolute;
    background-color: rgba($color: #000000, $alpha: 0.63);

    div.textbox {
      margin: 54px 83px;
      p.title {
        font-size: 39px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        margin-bottom: 30px;
      }
      .line {
        height: 1px;
        background: #ffffff;
        opacity: 0.22;
      }
      p.contant {
        margin:40px 14px 62px ;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 54px;
      }
    }
    .close {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #fff;
      position: absolute;
      right: 29px;
      top: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img{
        width:100%;
      }
    }
  }
}
</style>
